<template>
  <div>
    <div id="queryForm">
      <el-form :inline="true" :model="person">
        <el-form-item label="姓名">
          <el-col :span="15">
            <el-input size="mini" id="user-name" v-model="person.personName" placeholder="姓名"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="10">
            <el-input v-model="person.phoneNum" placeholder="手机号" size="mini"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="querySearch" size="mini">查询</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="resetForm" size="mini">清空</el-button>
          <el-button type="primary" size="mini">
            <router-link :to="'/person/save'">
              <i class="el-icon-plus el-icon--right">&nbsp;增加</i>
            </router-link>
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格数据 -->
    <el-table :data="personList" style="width: 60%" align="center">
      <!-- 姓名 -->
      <el-table-column align="center" label="姓名" width="180">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.personName }}</span>
        </template>
      </el-table-column>

      <!-- 手机号 -->
      <el-table-column align="center" label="手机号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
        </template>
      </el-table-column>

      <!-- 购入日期 -->
      <el-table-column align="center" label="入职时间" width="185 ">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.purchaseDate }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/person/getById/' + scope.row.personId">
            <el-button type="primary" icon="el-icon-edit" size="mini"> </el-button>
          </router-link>
          &nbsp;&nbsp;&nbsp;
          <el-button size="mini" icon="el-icon-delete" type="danger"
            @click="personDelete(scope.row.personId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页展示 -->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="current" :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
  </div>

</template>
<script lang="js">
export default {
  // 住户信息
  data () {
    return {
      person: {}, // 查询条件
      personList: [{
        personName: '李白',
        phoneNum: '14344343434',
        purchaseDate: '2020-12-24',
      },
      {
        personName: '周杰伦',
        phoneNum: '22234431243434',
        purchaseDate: '2010-12-24',
      },
      {
        personName: '林俊杰',
        phoneNum: '22234431243434',
        purchaseDate: '2024-12-24',
      },
      ], // 数据表格中的数据
      current: 1, // 当前页
      limit: 10, // 每页显示的记录数
      total: 50, // 符合条件的总记录数，
      option: 1
    }
  },
  created () {
    this.findPage(1, this.limit)
    console.log('住户组件被调用了')
  },
  mounted () {

  },
  computed: {

  },
  methods: {
    // 清空查询表单
    resetForm () {
      this.person = {}
      this.findPage(this.current, this.limit)
    },
    // 查询
    querySearch () {
      console.log(this.person)
      this.findPage(this.current, this.limit)
    },
    // 当前页显示的记录数改变
    handleSizeChange (val) {
      console.log(val)
      this.findPage(this.current, val)
    },
    // 当前页发生变化
    handleCurrentChange (val) {
      // console.log(val, this.limit)
      this.findPage(val, this.limit)
    },
    personEdit (index, row) {
      console.log(index, row)
    },
    // 删除住户
    personDelete (id, row) {
      console.log('点击了删除')
      this.$confirm("此操作会永久删除此员工信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //点击确实确认按钮
          this.$http({
            method: "delete",
            url: `person/deletePerson/${id}`,
          }).then((res) => {
            console.log('当前是住户列表,获取到的数据', res)
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              })
              this.findPage(this.current, this.limit)
            } else {
              this.$message({
                type: "info",
                message: "已取消删除",
              })
            }
          })
        })
    },
    // 员工分页查询
    findPage (current = 1, limit = 10) {
      console.log(`发送了请求，当前的页数是${current},请求数量是${limit}`)

      this.$http({
        method: "post",
        url: `/person/findPage/${current}/${limit}`,
        data: this.person,
      }).then((res) => {
        console.log(res)
        let data = res.data.data
        // 将得到的数据复制给personList
        this.personList = data.rows
        // 分页列表的总数
        this.total = data.total
        // 当前页
        this.current = data.current
        // 当前页数量
        // this.limit = data.limit
      })
    }
  },
}
</script>
<style scoped>

</style>
